import React, { Component } from 'react';

class Reftow extends Component {

    //获取数据
    getData = ()=>{
        console.log(this);
        // console.log(this.username.value);
        let value = this.username.value;
        this.div.innerHTML = value;
    }

    render() {
        return (
            <>
                <h1>回调函数形式的[ref]:获取真实dom对象</h1>
                {/* 当执行此行代码时:将 当前的 input对象 作为参数传递给回调函数,将dom对象赋值给当前实力对象的一个属性 */}
                <input ref={(el)=>{this.username=el}} type='text'/>
                <button onClick={this.getData}>获取数据</button>

                <div ref={el=>this.div=el} style={{width:'300px',height:'300px',border:'1px solid grey',overflow:'hidden'}}></div>
            </>
        );
    }
}

export default Reftow;